<template>
    <div class="screen_control">
        <img src="static/image/screen/pic_same_screen.png" />
        <div class="screen_control_p" v-if="isInviter">{{isReceiveShow ? `连接成功，${toInfo.name}正在观看你的屏幕！` : `你正在邀请${toInfo.name}参与同屏，请等待对方确认...`}}</div>
        <div class="screen_control_p" v-if="!isInviter">{{isConsentShow ? `连接成功，你正在观看${this.receiveScreenMsg.OwnerInfo.Username}的屏幕！` : `${toInfo.name}正在邀请你参与同屏，是否接受？`}}</div>
        <div class="screen_control_n">
            <div class="screen_control_n_c" v-if="isInviter" @click.stop.prevent="screenOperation(0)">{{isReceiveShow ? "结束" : "取消"}}</div>
            <template v-if="!isInviter">
                <div v-if="!isConsentShow">
                    <div class="screen_control_n_c screen_control_n_r" @click.stop.prevent="screenOperation(1)">接受</div>
                    <div class="screen_control_n_c" @click.stop.prevent="screenOperation(2)">拒绝</div>
                </div>
                <div v-else class="screen_control_n_c" @click.stop.prevent="screenOperation(0)">结束</div>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        toInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        isInviter: {
            type: Boolean,
            default: false
        },
        isReceiveShow: {
            type: Boolean,
            default: false
        },
        isConsentShow: {
            type: Boolean,
            default: false
        },
        receiveScreenMsg: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {

        }
    },
    computed: {
        myInfo() {
            return this.$store.state.myInfo;
        }
    },
    methods: {
        screenOperation(type) {
            if (type == 0) {// 取消、结束
                this.$emit("screenClose");
                if (this.isReceiveShow || this.isConsentShow) {
                    this.$emit("isConsentShowFn", false);
                    this.$emit("isReceiveShowFn", false);
                    // 结束同屏
                    let info = this.$ShareScreenAssistance("LeaveRoom", [`${this.myInfo.id}_PC`, this.receiveScreenMsg.RoomNo]);
                    info = JSON.parse(info);
                    if (info.return_code === "FALSE") {
                        this.$message({
                            message: info.return_msg,
                            type: "warning"
                        })
                    }
                }
            } else if (type == 1) {// 接收
                // 进入同屏
                let infos = this.$ShareScreenAssistance("EnterRoom", [this.receiveScreenMsg.OwnerInfo.ClientID, this.receiveScreenMsg.RoomNo, this.receiveScreenMsg.RoomPassword]);
                console.log(infos, '进入同屏')
                infos = JSON.parse(infos);
                if (infos.return_code === "FALSE") {
                    this.$message({
                        message: infos.return_msg,
                        type: "warning"
                    })
                } else {
                    this.$emit("isConsentShowFn", true);
                    // 同屏邀请接收
                    let info = this.$ShareScreenAssistance("IsAcceptInvite", [true, this.receiveScreenMsg.OwnerInfo.ClientID]);
                    console.log(info, "同屏邀请接收")
                    info = JSON.parse(info);
                    if (info.return_code === "FALSE") {
                        this.$message({
                            message: info.return_msg,
                            type: "warning"
                        })
                    }
                }
            } else if (type == 2) {// 拒接
                this.$emit("screenClose");
                let info = this.$ShareScreenAssistance("IsAcceptInvite", [false, this.receiveScreenMsg.OwnerInfo.ClientID]);
                console.log(info, "同屏邀请拒接")
                info = JSON.parse(info);
                if (info.return_code === "FALSE") {
                    this.$message({
                        message: info.return_msg,
                        type: "warning"
                    })
                }
            }
        },
        // 被邀请人是否接受邀请
        getIsAcceptInvite(bol) {
            if (bol == "True") {
                this.$emit("isReceiveShowFn", true);
            } else {
                this.$emit("screenClose");
                this.$message({
                    message: "对方拒接与你同屏",
                    type: "warning"
                })
            }
            console.log(bol, "被邀请人是否接受邀请")
        },
        // 结束同屏接口返回
        getLeaveRoom(info) {
            console.log(info, '结束同屏接口返回')
        }
    },
    created() {
        // 被邀请人是否接受邀请
        window.getIsAcceptInvite = this.getIsAcceptInvite;
        // 结束同屏接口返回
        window.getLeaveRoom = this.getLeaveRoom;
    }
}
</script>
<style lang="less" scoped>
    .screen_control {
        position: fixed;
        left: 64px;
        bottom: 0;
        z-index: 2000;
        border-top: 3px solid #fa7500;
        background: #ffedde;
        width: 256px;
        height: 170px;
        padding: 20px 20px 10px 20px;
        img {
            width: 52px;
            height: 50px;
            margin-bottom: 16px;
        }
        .screen_control_p {
            text-align: left;
            font-size: 12px;
            color: #333333;
        }
        .screen_control_n {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            div {
                display: flex;
            }
            .screen_control_n_c {
                width: 60px;
                height: 24px;
                border-radius: 4px;
                background: #ffffff;
                border: 1px solid #dddddd;
                font-size: 12px;
                color: #333333;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .screen_control_n_r {
                color: #fa7500;
                margin-right: 20px;
            }
        }
    }
</style>